<template>
	<div class="date-archive-panel">
		<div class="head"><i class="icon-ios-quote"></i>文章热度排行榜</div>
		<div class="body">
			<div class="item" v-for="(val,index) in hotArticles" :key="index">
				<div class="title" :title="val.title" @click="jumpToArticle(val)">{{val.title}}</div>
				<div class="count">{{val.hotRate}}<i v-if="index < 3" class="icon-ios-flame"></i></div>
			</div>
		</div>
	</div>
</template>

<script>
import {getHotArticle} from '../../../../../service/postService';

export default {
	name: 'DateArchivePanel',
	data () {
		return {
			hotArticles: []
		};
	},
	mounted () {
		let self = this;
		let params = {
			size: 10
		};
		getHotArticle(params).then(data => {
			self.hotArticles = data.resultList;
		});
	},
	methods: {
		jumpToArticle (val) {
			window.open('#/article/' + val.title + '=' + val.id);
		}
	}
};
</script>

<style lang="scss" scoped>
	.date-archive-panel {
		margin-bottom: 10px;
		background: white;
		text-align: left;
		padding: 10px 16px;
		font-weight: bold;
		color: #1b1919;
		width: 100%;
		border: 1px solid #f2f2f2;

		.head {
			height: 40px;
			line-height: 36px;
			border-bottom: 1px solid #f2f2f2;
			i {
				color: #7aa7d1;
				position: relative;
				top: 0px;
				left: -5px;
				font-size: 22px;
			}
		}
		.body {
			width: 100%;
			font-size: 14px;
			font-weight: normal;
			.item {
				width: 100%;
				height: 40px;
				line-height: 40px;
				.title {
					width: 75%;
					float: left;
					text-align: left;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
					cursor: pointer;
					color: #6b6b6b;
					&:hover {
						color: #7aa7d1;
					}
				}
				.count {
					float: right;
					height: 40px;
					width: 20%;
					text-align: left;
					i {
						color: red;
					}
				}
			}
		}
	}
</style>
